<script lang="ts" setup>
import { ref } from "vue";

const list = ref<any>([
  {
    createdAt: "2023-01-01 20:11:33",
    photo: "13800138000",
    teamName: "刘艺成的团",
    teamIdentity: "团长",
    teamMemberCount: 11,
    applicant: {
      realName: "刘艺成",
      phone: "13512345678",
    },
    nickName: "梁春飞",
    paymentAmount: "50元",
    receivedAmount: "49.65元",
    teamStatus: "待成团",
    orderStatus: "待核销",
  },
  {
    createdAt: "2023-01-01 20:11:33",
    photo: "13800138000",
    teamName: "刘艺成的团",
    teamIdentity: "团员",
    teamMemberCount: 11,
    applicant: {
      realName: "刘二妹",
      phone: "13512345678",
    },
    nickName: "梁春飞",
    paymentAmount: "50元",
    receivedAmount: "49.65元",
    teamStatus: "已成团",
    orderStatus: "已核销",
  },
  {
    createdAt: "2023-01-01 20:11:33",
    photo: "13800138000",
    teamName: "肖云珊的团",
    teamIdentity: "团长",
    teamMemberCount: 11,
    applicant: {
      realName: "肖云珊",
      phone: "15912345678",
    },
    nickName: "双木",
    paymentAmount: "50元",
    receivedAmount: "49.65元",
    teamStatus: "已成团",
    orderStatus: "已核销",
  },
]);

const teamList = ref<any>([
  {
    count: 5,
  },
  {
    count: 5,
  },
]);

const transferModalVisible = ref(false);
</script>
<template>
  <umrp-container direction="vertical" :gap="16" height="100%" bg-color="#f2f2f2" padding="16px">
    <umi-breadcrumb :items="['活动管理', '活动列表', '报名表']"></umi-breadcrumb>
    <umrp-card>
      <umrp-grid :cols="4" :row-gap="10" :col-gap="10">
        <umrp-grid-item>
          <umrp-statistic :value="999">
            <template #extra>
              <umrp-space align="center" :size="4">
                <div>已报名人数</div>
                <umrp-tooltip content="已经报名并支付成功的人数总和">
                  <umrp-icon name="help" :size="16" color="#333"></umrp-icon>
                </umrp-tooltip>
              </umrp-space>
            </template>
          </umrp-statistic>
        </umrp-grid-item>
        <umrp-grid-item>
          <umrp-statistic :value="999">
            <template #extra>
              <umrp-space align="center" :size="4">
                <div>总支付金额</div>
                <umrp-tooltip content="当前活动报名支付金额的总和">
                  <umrp-icon name="help" :size="16" color="#333"></umrp-icon>
                </umrp-tooltip>
              </umrp-space>
            </template>
          </umrp-statistic>
        </umrp-grid-item>
        <umrp-grid-item>
          <umrp-statistic :value="999">
            <template #extra>
              <umrp-space align="center" :size="4">
                <div>退款人数</div>
                <umrp-tooltip content="当前活动退款人数的总和">
                  <umrp-icon name="help" :size="16" color="#333"></umrp-icon>
                </umrp-tooltip>
              </umrp-space>
            </template>
          </umrp-statistic>
        </umrp-grid-item>
        <umrp-grid-item>
          <umrp-statistic :value="999">
            <template #extra>
              <umrp-space align="center" :size="4">
                <div>退款金额(元)</div>
                <umrp-tooltip content="当前活动退款金额的总和">
                  <umrp-icon name="help" :size="16" color="#333"></umrp-icon>
                </umrp-tooltip>
              </umrp-space>
            </template>
          </umrp-statistic>
        </umrp-grid-item>
        <umrp-grid-item>
          <umrp-statistic :value="999">
            <template #extra>
              <umrp-space align="center" :size="4">
                <div>实收金额(元)</div>
                <umrp-tooltip content="当前活动总收款扣除佣金后的剩余总额">
                  <umrp-icon name="help" :size="16" color="#333"></umrp-icon>
                </umrp-tooltip>
              </umrp-space>
            </template>
          </umrp-statistic>
        </umrp-grid-item>
        <umrp-grid-item>
          <umrp-statistic :value="999">
            <template #extra>
              <umrp-space align="center" :size="4">
                <div>开团数</div>
                <umrp-tooltip content="用户选择开团且报名支付成功的总和">
                  <umrp-icon name="help" :size="16" color="#333"></umrp-icon>
                </umrp-tooltip>
              </umrp-space>
            </template>
          </umrp-statistic>
        </umrp-grid-item>
        <umrp-grid-item>
          <umrp-statistic :value="999">
            <template #extra>
              <umrp-space align="center" :size="4">
                <div>成团数</div>
                <umrp-tooltip content="当前活动中达成最低成团人数的总和">
                  <umrp-icon name="help" :size="16" color="#333"></umrp-icon>
                </umrp-tooltip>
              </umrp-space>
            </template>
          </umrp-statistic>
        </umrp-grid-item>
      </umrp-grid>
    </umrp-card>
    <umrp-card>
      <umrp-table :data="list">
        <template #columns>
          <umrp-table-column title="序号" data-index="id"></umrp-table-column>
          <umrp-table-column title="微信资料" slot-name="wxinfo"></umrp-table-column>
          <umrp-table-column title="报名信息" slot-name="applicant"></umrp-table-column>
          <umrp-table-column title="邀请人" slot-name="invitedBy"></umrp-table-column>
          <umrp-table-column title="团内身份" data-index="teamIdentity"></umrp-table-column>
          <umrp-table-column title="团人数" data-index="teamMemberCount"></umrp-table-column>
          <umrp-table-column title="所属团" data-index="teamName"></umrp-table-column>
          <umrp-table-column title="支付金额" data-index="paymentAmount"></umrp-table-column>
          <umrp-table-column title="实收金额" data-index="receivedAmount"></umrp-table-column>
          <umrp-table-column title="报名时间" data-index="createdAt"></umrp-table-column>
          <umrp-table-column title="待成团" data-index="teamStatus"></umrp-table-column>
          <umrp-table-column title="操作" slot-name="action"></umrp-table-column>
        </template>
        <template #invitedBy>
          <umrp-space direction="vertical" :size="6">
            <umrp-text>高州百悦艺术张老师</umrp-text>
            <umrp-text>13512345678</umrp-text>
            <umrp-text>ID:125709154</umrp-text>
          </umrp-space>
        </template>
        <template #applicant="{ record }">
          <umrp-space direction="vertical" :size="10">
            <umrp-text>{{ record.applicant.realName }}</umrp-text>
            <umrp-text>{{ record.applicant.phone }}</umrp-text>
          </umrp-space>
        </template>
        <template #action="{ record }">
          <umrp-space :size="10">
            <umrp-button type="primary">开团</umrp-button>
            <umrp-button type="primary" @click="transferModalVisible = true">转团</umrp-button>
            <umrp-button type="primary" v-if="record.teamIdentity === '团长'">降为团员</umrp-button>
            <umrp-button type="primary" v-else>升为团长</umrp-button>
          </umrp-space>
        </template>
        <template #wxinfo="{ nickName, userId }">
          <umrp-user-info :nick-name="nickName" :user-id="userId"> </umrp-user-info>
        </template>
      </umrp-table>
    </umrp-card>
    <umi-modal :visible="transferModalVisible" :width="500" :footer="false">
      <umrp-container direction="vertical" :gap="10">
        <umrp-input-search></umrp-input-search>
        <umrp-table :data="teamList">
          <template #columns>
            <umrp-table-column title="团长" slot-name="teamer"></umrp-table-column>
            <umrp-table-column title="团人数" data-index="count" width="100"></umrp-table-column>
            <umrp-table-column title="操作" slot-name="action"></umrp-table-column>
          </template>
          <template #teamer="{ record }">
            <umrp-user-info :nick-name="record.nickName" :user-id="record.userId"> </umrp-user-info>
          </template>
          <template #action>
            <umrp-space :size="10">
              <umrp-button type="primary" @click="transferModalVisible = false">选择</umrp-button>
            </umrp-space>
          </template>
        </umrp-table>
      </umrp-container>
    </umi-modal>
  </umrp-container>
</template>
